<template>
	<div v-loading="loading" element-loading-text="Loading..." :element-loading-spinner="svg"
		element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="rgba(122, 122, 122, 0.8)">
		<div class="tab-container">
			<el-table :data="Data_Node.slice((currentPage1 - 1) * pagesize1, currentPage1 * pagesize1)" border fit
				highlight-current-row style="width: 100%">
            <el-table-column :label="`实体-顶点`">
                <el-table-column prop="实体类别" label="实体类别"></el-table-column>
				<el-table-column prop="实体总数" label="实体总数"></el-table-column>
            </el-table-column>
			</el-table>

			<el-pagination style="margin: 12px 0px" background @size-change="handleSizeChange1"
				@current-change="handleCurrentChange1" :current-page="currentPage1" :page-sizes="[5, 10, 20, 40]"
				:page-size="pagesize1" layout="total, sizes, prev, pager, next, jumper" :total="Data_Node.length">
			</el-pagination>
		</div>
		<div class="tab-container">
			<el-table :data="Data_Rel.slice((currentPage2 - 1) * pagesize2, currentPage2 * pagesize2)" border fit
				highlight-current-row style="width: 100%">
                <el-table-column :label="`关系-边类型`">
				<el-table-column prop="出发顶点" label="出发顶点"></el-table-column>
				<el-table-column prop="目的顶点" label="目的顶点"></el-table-column>
				<el-table-column prop="边类别" label="边类别"></el-table-column>
                <el-table-column prop="关系总数" label="关系总数"></el-table-column>
            </el-table-column>
			</el-table>

			<el-pagination style="margin: 12px 0px" background @size-change="handleSizeChange2"
				@current-change="handleCurrentChange2" :current-page="currentPage2" :page-sizes="[5, 10, 20, 40]"
				:page-size="pagesize2" layout="total, sizes, prev, pager, next, jumper" :total="Data_Rel.length">
			</el-pagination>
		</div>
		<el-button @click="gotolink" class=" btn-success" type="primary" style="display:block; margin:0 auto">下一步
		</el-button>
	</div>

</template>
<script>
//调用接口
import { Metadata } from "@/util/metadata"
import { Info } from '@/util/message'

export default {
	data() {
		return {
			// 分页
			currentPage1: 1, //初始页
			pagesize1: 5, //    每页的数据
			currentPage2: 1, //初始页
			pagesize2: 5, //    每页的数据
			total: 0,
			Data_Node: [],
			loading: false,
			svg: `
				<path class="path" d="
				M 30 15
				L 28 17
				M 25.61 25.61
				A 15 15, 0, 0, 1, 15 30
				A 15 15, 0, 1, 1, 27.99 7.5
				L 15 15
				" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
			`
		};
	},
	created() {
		this.Metadata();
	},
	methods: {
		// 初始页currentPage、初始每页数据数pagesize和数据data
		handleSizeChange1: function (size) {
			this.pagesize1 = size;
			console.log(this.pagesize1); //每页下拉显示数据
		},
		handleCurrentChange1: function (currentPage) {
			this.currentPage1 = currentPage;
			console.log(this.currentPage1); //点击第几页
		},
		handleSizeChange2: function (size) {
			this.pagesize2 = size;
			console.log(this.pagesize2); //每页下拉显示数据
		},
		handleCurrentChange2: function (currentPage) {
			this.currentPage2 = currentPage;
			console.log(this.currentPage1); //点击第几页
		},
		sleep(time) {
			return new Promise((resolve) => setTimeout(resolve, time));
		},
		async gotolink() {
			this.loading = true
			Info('图谱构建中...')
			await this.sleep(10000)
			this.$router.replace('/graph_guide');
			this.loading = true;
		},
		Metadata() {
			Metadata().then((res) => {
				console.log("查询信息", res.data);
				this.Data_Node = res.data.nodeMeta;
				this.Data_Rel = res.data.relMeta;
			});
		}

	},
};
</script>
<style scoped>
.tab-container {
	margin: 30px;
}
</style>